/**
 * @Description:
 * @author tao.xie
 * @date $
 */

import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity
} from 'react-native'
import { connect } from 'react-redux'
import { px2dp } from 'rn-xiaobu-utils'
import { deleteOrderAction } from '../actions/MallAction.js'

class SKUModule extends React.PureComponent {
  render () {
    return (
      <View style={styles.container}>
        <Image source={{ uri: this.props.sku.skuPic }} style={styles.image}></Image>
        <TouchableOpacity onPress={()=>{
          this.props.deleteOrderAction(this.props.sku,1)
        }}>
          <View style={styles.skuwrapper}>
            <Text>{this.props.sku.skuName}</Text>
            <Text>*{this.props.sku.skuNum}</Text>
          </View></TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'
  },
  skuwrapper: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center'
  },
  image: {
    height: px2dp(220),
    width: px2dp(220)
  }
})

export default connect(
  (state) => ({
    dataList: state.orderReducer.dataList
  }),
  (dispatch) => ({
    deleteOrderAction: (item, index) => dispatch(deleteOrderAction(item, index))
  })
)(SKUModule)